<template>
    <view class="activity-card" @click="navigateToNextPage('/pages/dynamicInfo/dynamicInfo?id=' + id)">
        <view class="user-info">
            <view class="avatar" :style="'--icon: url(' + userIcon + ')'"></view>
            <view class="user-name">{{ username }}</view>
        </view>
        <view class="activity-content">
            <view class="title">{{ title }}</view>
            <view class="description">{{ content }}</view>
            <view class="photo-list" v-if="imgList.length">
                <view class="photo" v-for="imgItem in imgList" :key="imgItem.id" :style="'--photo: url(' + imgItem.url + ')'"></view>
            </view>
            <view class="tag" :style="`--c: ${circlePostTypeTextColor}; --bg: ${circlePostTypeBgColor};`" v-if="circlePostType">{{ circlePostType }}</view>
            <view class="meta">
                <view class="stats">
                    <view class="stat-item" @click.stop="clickLikeBtn(isLike)" :style="`--icon: url(${ base_url }/static/img/${isLike ? 'islike' : 'noislike'}.svg)`">
                        <view>{{ likeCount }}</view>
                    </view>
                    <view class="stat-item" :style="`--icon: url(${ base_url }/static/img/comment.svg)`">
                        <view>{{ commentCount }}</view>
                    </view>
                </view>
                <view class="time">{{ time }}</view>
            </view>
        </view>
    </view>
</template>

<script setup>
// import { defineProps, defineEmits } from 'vue';

// 服务层
import { circlePost } from '../../server/circlePost';
import { base_url } from '../../server/config';

// 组件内需要的属性
const props = defineProps({
    id: { type: String, default: '' },
    username: { type: String, default: '' },
    userIcon: { type: String, default: '' },
    title: { type: String, default: '' },
    content: { type: String, default: '' },
    imgList: { type: Array, default: () => [] },
    circlePostType: { type: String, default: '' },
    circlePostTypeTextColor: { type: String, default: '' },
    circlePostTypeBgColor: { type: String, default: '' },
    commentCount: { type: Number, default: 0 },
    likeCount: { type: Number, default: 0 },
    isLike: { type: Boolean, default: false },
    time: { type: String, default: '' }
});

// 注册事件
const emit = defineEmits(['clickLikeBtn']);

function clickLikeBtn(isLike) {
    // 获取外部传递进来的id值
    const postId = props.id;
    // 抽取公共函数部分
    let tmp_function = isLike ? circlePost.nolikePost : circlePost.likePost;
    let ok_msg = isLike ? '取消点赞成功' : '点赞成功';
    let no_msg = isLike ? '取消点赞失败' : '点赞失败';
    // 点赞 或 取消点赞
    tmp_function(postId).then((res) => {
        if (res.success) {
            // 通知父组件
            console.log('通知父组件之前');
            emit('clickLikeBtn', { isLike: !isLike, id: postId });
            console.log('通知父组件之后');
            uni.showToast({
                title: ok_msg,
                icon: 'none'
            });
        } else {
            uni.showToast({
                title: no_msg,
                icon: 'none'
            });
        }
    }).catch((err) => {
        uni.showToast({
            title: '请检查网络',
            icon: 'none'
        });
    });
}

function navigateToNextPage(url) {
    uni.navigateTo({ url });
}

</script>

<style scoped>
.activity-card {
	border-radius: 3vmin;
	border: 0.25vmin solid rgba(128, 128, 128, 0.2);
	margin-top: 4vmin;
    padding: 4vmin;
    box-shadow: 0 0.5vmin 2vmin #0000000a;
	background-color: #fff;
}

.user-info {
	display: flex;
    align-items: center;
    gap: 3vmin;
    margin-bottom: 3vmin;
}

.avatar {
	width: 10vmin;
    height: 10vmin;
    border-radius: 50%;
    background-image: var(--icon);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-name {
	font-size: 3.5vmin;
    font-weight: 500;
    color: #333;
	flex: 1;
    overflow: hidden;
	text-overflow: ellipsis;
}

.activity-content {
    margin-left: 13vmin;
}

.title {
    font-size: 4vmin;
    font-weight: 900;
    margin-bottom: 2vmin;
	overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    color: #333;
	-webkit-box-orient: vertical;
    transition: all .3s ease;
}

.description {
    font-size: 3.5vmin;
    color: #666;
    line-height: 1.5;
    margin-bottom: 3vmin;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    transition: all .3s ease;
}

.photo {
	width: 50vmin;
	height: 50vmin;
	border-radius: 2vmin;
	overflow: hidden;
	background-color: #888a;
    background-image: var(--photo);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin-bottom: 3vmin;
}

.tag {
    display: inline-block;
    align-items: center;
    margin: 1vmin;
    padding: 1vmin 2vmin;
    border-radius: 1vmin;
    font-size: 3vmin;
    background-color: var(--bg);
	margin-bottom: 3vmin;
    color: var(--c);
	transition: all .3s ease;
}

.meta {
	display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.stats {
	display: flex;
    gap: 4vmin;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 1vmin;
    color: #999;
	font-size: 3.5vmin;
}

.stat-item::before {
    --size: 5vmin;
	content: "";
	display: block;
	width: var(--size);
	height: var(--size);
    background-image: var(--icon);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.time {
    font-size: 3vmin;
    color: #999;
}
</style>